require('./Pagewdjmain.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,SearchBar} from  'react-weui/build/packages'
import {Control} from 'react-keeper';
import loufang  from './../../../assets/img/楼房.png';
import dagou  from './../../../assets/img/打勾.png';
import dacha  from './../../../assets/img/打叉.png';
import construction  from './../../../assets/icon/zhzj/施工单位.png';


class Wdjmain extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
  }

  handleChange(text) {
    Actions.handleChange(text);
  }

  handleCancel() {
    Actions.handleCancel();
  }

  render() {
    return (
      <div>
        <SearchBar onChange={this.handleChange}
                   onCancel={this.handleCancel}
                   defaultValue=""
                   placeholder="请输入企业名称"
        >
        </SearchBar>

        {
          this.state.wdjmain.searchDivShow && this.state.wdjmain.searchData.length > 0 &&
          <div className="searchDisDiv" onClick={this.handleCancel}>
            <Panel>
              <PanelBody>
                {this.state.wdjmain.searchData.map((item, i) => {
                  return (
                    <MediaBox type="appmsg" onClick={() => {
                      Control.go('/wdjhome/wdjdetail', {
                      dataDetail:item
                    })
                    }}>
                      <MediaBoxHeader>
                        <img src={construction} style={{
                          width: 30,
                          height: 30,
                          marginTop: 15
                        }}/>
                      </MediaBoxHeader>
                      <MediaBoxBody>
                        <MediaBoxTitle>{item.pname}</MediaBoxTitle>
                        <MediaBoxDescription>
                          {item.pcode}<br/>
                          <span className="pname">{item.city}</span>
                        </MediaBoxDescription>
                      </MediaBoxBody>
                    </MediaBox>
                  )
                })
                }

              </PanelBody>
            </Panel>
          </div>
        }

        {
          this.state.wdjmain.pdata.length > 0 ?
            this.state.wdjmain.pdata.map((item, i)=> {
              return (
                <Panel>
                  <PanelBody>
                    <MediaBox style={{
                      width:"56%",
                      float:"left"
                    }} key={i} type="appmsg" onClick={() =>
                    {Control.go('/wdjhome/wdjdetail',{
                      dataDetail:item
                    })}}>
                      <MediaBoxHeader>
                        <img src={loufang} style={{
                          width:35,
                          height:35,
                          marginTop:15
                        }}/>
                      </MediaBoxHeader>
                      <MediaBoxBody>
                        <MediaBoxDescription>
                          <span className="pname">{item.title}</span>
                        </MediaBoxDescription>
                        <MediaBoxDescription>
                          <br/>
                          {item.createTime}
                        </MediaBoxDescription>
                      </MediaBoxBody>
                    </MediaBox>

                    <MediaBox style={{
                      width:"27%",
                      float:"left",
                    }} type="appmsg" onClick={() =>
                    {Control.go('/wdjhome/wdjdetail',{
                      dataDetail:item
                    })}}>
                      <MediaBoxBody>
                        <MediaBoxTitle>
                          <img src={dagou} style={{
                            float:"left",
                            width:16,
                            height:16,
                            marginTop:5
                          }}/>
                          <span className="greyfont">
                          竣工验收备案
                          </span>
                        </MediaBoxTitle>
                        <MediaBoxTitle style={{
                          marginTop:10
                        }}>
                          <img src={dacha} style={{
                            float:"left",
                            width:16,
                            height:16,
                            marginTop:5
                          }}/>
                          <span className="greyfont">
                          使用备案
                          </span>
                        </MediaBoxTitle>
                      </MediaBoxBody>
                    </MediaBox>
                  </PanelBody>
                </Panel>
              )
            })
            :
            <Panel>
              <PanelBody>
                <MediaBox>搜索不到结果</MediaBox>
              </PanelBody>
            </Panel>
        }
      </div>
    );
  }

  componentWillMount() {
    Actions.loadData();
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.wdjmain || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Wdjmain, Reflux.connect(Store, 'wdjmain'));


export default Wdjmain ;
